import { Tetris } from "./tetrisblock.js";

const UIDom = {
    canvas: document.getElementById("Tetris"),
    startBtn: document.getElementById("start"),
    pauseBtn: document.getElementById("pause"),
    leftBtn: document.getElementById("left"),
    rightBtn: document.getElementById("right"),
    downBtn: document.getElementById("down"),
    rotateBtn: document.getElementById("rotate"),
    dropBtn: document.getElementById("drop"),
};

UIDom.canvas.width = 320;
UIDom.canvas.height = 445;

const tetris = new Tetris(20, 10, UIDom.canvas);

tetris.drawBackground();
// tetris.drawUI();
UIDom.startBtn.onclick = (e) => {
    tetris.start();
    e.target.blur();
};

UIDom.pauseBtn.onclick = (e) => {
    tetris.pause();
    e.target.blur();
};

UIDom.leftBtn.onclick = () => {
    tetris.moveLeft();
};

UIDom.rightBtn.onclick = () => {
    tetris.moveRight();
};

UIDom.downBtn.onclick = () => {
    tetris.moveDown();
};

UIDom.rotateBtn.onclick = () => {
    tetris.rotate();
};
UIDom.dropBtn.onclick = () => {
    tetris.moveFastDown();
};

document.onkeydown = function (e) {
    console.log("key:", e.key);
    switch (e.key) {
        case "ArrowLeft":
            tetris.moveLeft();
            break;
        case "ArrowRight":
            tetris.moveRight();
            break;
        case "ArrowUp":
            tetris.rotate();
            break;
        case "ArrowDown":
            tetris.moveDown();
            break;
        case " ":
            tetris.moveFastDown();
            break;
    }
};
